<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>#{msgs.productDetailsCaption}</title>
<h:outputStylesheet library="css" name="style.css" />
    </h:head>
    <h:body>
        <div style="margin-left: auto; margin-right: auto; width: 30%; text-align: left;">
            <h:panelGrid columns="2" captionClass="emphasis">
                <f:facet name="caption">
                    #{msgs.productDetailsCaption}
                </f:facet>

                <h:outputText value="#{msgs.productDetailsItem}" styleClass="emphasis"/>
                <h:outputText value="#{bsControllerPCB.selectedProduct.prodName}" />

                <h:outputText value="#{msgs.productDetailsPrice}" styleClass="emphasis"/>
                <h:outputText value="#{bsControllerPCB.selectedProduct.price}" />

                <h:outputText value="#{msgs.productDetailsQty}" styleClass="emphasis"/>
                <h:outputText value="#{bsControllerPCB.selectedProduct.quantityInStock}" />

                <h:outputText value="#{msgs.productDetailsReview}" styleClass="emphasis"/>
                <h:outputText value="#{bsControllerPCB.selectedProduct.description}" />
            </h:panelGrid>
            <div style="margin-left: auto; margin-right: auto; text-align: center">
                <h:form>
                    <p>
                        <h:inputText value="#{bsControllerPCB.purchaseQuantity}" label="#{msgs.productDetailsQty}">
                            <f:validateLongRange minimum="1" maximum="#{bsControllerPCB.selectedProduct.quantityInStock}"/>
                        </h:inputText>
                    </p>

                    <p>
                        <h:commandButton value="#{msgs.productDetailsAddToCart}" action="#{bsControllerPCB.addToCart()}" />
                        <h:commandButton value="#{msgs.back}" action="productSelection" immediate="true"/>
                    </p>
                </h:form>
            </div>
        </div>
    </h:body>
</html>
